<template>
  <div>
    <!-- -->
    <div class="box">
      <img src="https://error404.fun/img/full-preview/2x/19.png" alt="">
      <h2>404 :( 页面出错</h2>
      <button @click="goUp()">返回上一页</button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Vue2404',

  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {
    goUp() {
      window.history.go(-1);
    }
  },
};
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h2 {
  font-size: 10vw;
}

img {
  width: 100vw;
  height: 100vw;
}

button {
  border: 1px solid wheat;
  width: 32vw;
  height: 14vw;
  font-size: 4vw;
  border-radius: 4vw;
  background-image: linear-gradient(200deg, #fbc2eb 0%, #a6c1ee 100%);
}
</style>